<!DOCTYPE html>
<html lang="en">
<head>
    <!-- Bootstrap core JavaScript
    ================================================== -->
    <!-- Placed at the end of the document so the pages load faster -->
    <#include "/common/_commresource.html"/> 
    <title>随意论坛</title>
</head>

  <body>
    <#include "/common/_commtop.html"/> <section class="content-wrap">
        <div class="container">
            <div class="row">
            
<main class="col-md-12 main-content">
<article class="post">
	<div class="template-page-wrapper">
	<form class="form-horizontal templatemo-signin-form" role="form" id="registerform"  method="post">
		<!-- 用户名start -->
		<div class="form-group">
			<div class="col-md-12">
				<label for="username" class="col-sm-5 control-label">用户名</label>
				<div class="col-sm-3">
				<input type="text" class="form-control"
									id="userName" name="userName" placeholder="用户名">
				</div>
				<div class="col-sm-4"></div>
			</div>
		</div>
		<!-- 用户名end -->
		
		<!-- 密码start -->		
		<div class="form-group">
			<div class="col-md-12">
				<label for="password" class="col-sm-5 control-label">密 码</label>
				<div class="col-sm-3">
				<input type="password" class="form-control"
									id="password" name="password" placeholder="密 码">
				</div>
				<div class="col-sm-4"></div>
			</div>
		</div>		
		
		<div class="form-group">
			<div class="col-md-12">
				<label for="repassword" class="col-sm-5 control-label">再次输入密码</label>
				<div class="col-sm-3">
				<input type="password" class="form-control"
									id="repassword" name="repassword" placeholder="再次输入密码">
				</div>
				<div class="col-sm-4"></div>
			</div>
		</div>
		<!-- 密码end -->	
		
		
		<!-- email start -->
		<div class="form-group">
			<div class="col-md-12">
				<label for="email" class="col-sm-5 control-label">邮 箱</label>
				<div class="col-sm-3">
				<input type="text" class="form-control"
									id="email" name="email" placeholder="邮箱">
				</div>
				<div class="col-sm-4">
				<input type="button" class="btn btn-primary" type="submit" value="发送邮件验证码" onclick="getEmailCaptch();">
				</div>
			</div>
		</div>		
		<!-- validate 验证 
		<div class="form-group">
			<div class="col-md-12">
				<label for="emailCaptcha" class="col-sm-5 control-label">请输入您邮件中的验证码</label>
				<div class="col-sm-3">
				<input type="text" class="form-control"
									id="emailCaptcha" name="emailCaptcha" placeholder="验证码">
				</div>
				<div class="col-sm-4"></div>
			</div>
		</div>
		 end -->
		
		<!-- operation 操作按钮 -->
		
		<div class="form-group">
			<div class="col-md-4">
			</div>
			<div class="col-md-4" >
    		<button type="submit" class="btn btn-danger" type="submit" style="width:60%; margin-right:5%;">注册</button>
    		<a class="btn btn-warning" href="/forum" role="button" style="width:30%;">返回</a> 
			</div>
			<div class="col-md-4">
			</div>
		</div>
        
	</form>
	</div>
</article>
</main>

            </div>
        </div>
    </section>
</body>

	<script type="text/javascript">
		$(document).ready(function() {
			/**
			 * 下面是进行插件初始化
			 * 你只需传入相应的键值对
			 * */
			$('#registerform').bootstrapValidator({
				message : 'This value is not valid',
				feedbackIcons : {/*输入框不同状态，显示图片的样式*/
					valid : 'glyphicon glyphicon-ok',
					invalid : 'glyphicon glyphicon-remove',
					validating : 'glyphicon glyphicon-refresh'
				},
				fields : {/*验证*/
					userName : {
						message : '用户名无效',
						validators : {
							notEmpty : {
								message : '用户名不能为空'
							},
							regexp : {/* 只需加此键值对，包含正则表达式，和提示 */
								regexp : /^[a-zA-Z0-9_\.]+$/,
								message : '只能是数字和字母_.'
							},
							stringLength : {
								min : 4,
								max : 30,
								message : '用户名长度在4到30之间'
							},
							threshold : 4, //有6字符以上才发送ajax请求，（input中输入一个字符，插件会向服务器发送一次，设置限制，6字符以上才开始）
							remote : {//ajax验证。server result:{"valid",true or false} 向服务发送当前input name值，获得一个json数据。例表示正确：{"valid",true}  
								url : 'user/checkUserName',//验证地址
								message : '用户名已存在',//提示消息
								delay :  2000,//每输入一个字符，就发ajax请求，服务器压力还是太大，设置2秒发送一次ajax（默认输入一个字符，提交一次，服务器压力太大）
								type : 'POST'//请求方式
							/**自定义提交数据，默认值提交当前input value
							 *  data: function(validator) {
							      return {
							          password: $('[name="passwordNameAttributeInYourForm"]').val(),
							          whatever: $('[name="whateverNameAttributeInYourForm"]').val()
							      };
							   }
							 */
							}
						}
					},
					password : {
						message : '密码无效',
						validators : {
							notEmpty : {
								message : '密码不能为空'
							},
							different : {
								field : 'oldpassword',
								message : '不能和旧密码相同'
							},
							regexp : {/* 只需加此键值对，包含正则表达式，和提示 */
								regexp : /^[a-zA-Z0-9_\.]+$/,
								message : '只能是数字和字母_.'
							},
							stringLength : {
								min : 6,
								max : 12,
								message : '新密码长度必须在6到12之间'
							}
						}
					},
					repassword : {
						message : '密码无效',
						validators : {
							notEmpty : {
								message : '再次输入密码不能为空'
							},
							identical : {//相同
								field : 'password',
								message : '两次密码不一致'
							},
							regexp : {/* 只需加此键值对，包含正则表达式，和提示 */
								regexp : /^[a-zA-Z0-9_\.]+$/,
								message : '只能是数字和字母_.'
							},
							stringLength : {
								min : 6,
								max : 12,
								message : '再次输入密码长度必须在6到12之间'
							}
						}
					},
					 email: {
		                 validators: {
		                     notEmpty: {
		                         message: '邮件不能为空'
		                     },
		                     emailAddress: {
		                         message: '请输入正确的邮件地址如：123@qq.com'
		                     }
		                 }
		             },
		             emailCaptcha : {
						validators : {
							notEmpty : {
								message : '验证码不能为空'
							},
							regexp : {/* 只需加此键值对，包含正则表达式，和提示 */
								regexp : /^[a-zA-Z0-9]+$/,
								message : '只能是数字和字母'
							}
						}
					}
				}
			});
		});
	</script>
	
	<script type="text/javascript">
	  function getEmailCaptch(){
			var ei = document.getElementById("email").value;
			if(ei==''){
				alert("请输入邮箱地址。");
				return false;
			}
			var reg = /^([a-zA-Z0-9]+[_|\_|\.]?)*[a-zA-Z0-9]+@([a-zA-Z0-9]+[_|\_|\.]?)*[a-zA-Z0-9]+\.[a-zA-Z]{2,3}$/;
			if(!reg.test(ei)){
				 alert("请输入正确格式的邮箱地址！");
				 return false;
			}
			$.ajax({
			    type: "post",
			    dataType: 'json',
			    url: 'x'+new Date(),
			    data: {email:ei},
			    success:function(res){
			    	alert(res.err);
			    }
			});
		}
		</script>
	
</html>